<template>
<view class="Lu-fxsc-box">
     <view class="Lu-fxsc-header">
		 保存图片，复制文字可分享至朋友圈。坚持每天分享朋友圈素材，有利于快速吸引潜在用户。
	 </view>
	 <view class="Lu-fxsc-lists">
		 <view class="Lu-fxsc-list" v-for="(item,index) in sclists" :key="index">
			<view class="Lu-fxsc-listone" style="margin-top: 0;">{{item.value_1}}</view>
			<view class="Lu-fxsc-listone">{{item.value_2}}</view>
			<view class="Lu-fxsc-listone">{{item.value_3}}</view>
			<view class="Lu-fxsc-listone">{{item.value_4}}</view>
			<view class="Lu-fxsc-listone">{{item.value_5}}</view>
			<view class="Lu-fxsc-listone">{{item.value_6}}</view>
			<view class="Lu-fxsc-listone">{{item.value_7}}</view>
			<view class="Lu-fxsc-listimg">
				<image :src='apiUrl + item.pic'></image>
				<text class="Lu-fxsc-listime">{{item.create_time}}</text>
			</view>
			<view class="Lu-fxsc-listsave">
				<view class="Lu-fxsc-listphone" @click="saveimage(apiUrl + item.pic)"><text class="iconfont icon-saveimg"></text><text>保存到手机</text></view>
				<view class="Lu-fxsc-listsx"></view>
				<view class="Lu-fxsc-listext" @click="paste(item.value_1,item.value_2,item.value_3,item.value_4,item.value_5,item.value_6,item.value_7)"><text class="iconfont icon-savetext"></text><text>复制文字</text></view>
			</view>
		 </view>
	 </view>
</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import md5 from 'js-md5';
	export default {
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data() {
			return {
				sclists:[]
				
			}
			
		},
		onLoad() {
			uni.request({
				url:this.apiUrl+'api/get_material_list',
				method:"POST",
				header:{
					openid:this.openId
				},
				data:{
					// page:'',
					// limit:''
				},
				success: (res) => {
					console.log(res)
					this.sclists = res.data.data
				},
			})
		},
		methods:{
			paste(value1,value2,value3,value4,value5,value6,value7) {
				console.log(value1+'\n',value2+'\n',value3+'\n',value4+'\n',value5+'\n',value6+'\n',value7)
				uni.setClipboardData({
					data: value1+'\n' + value2+'\n' + value3+'\n' + value4+'\n' + value5+'\n' + value6+'\n' + value7
				});
			},
			
			saveimage:function(url){
				uni.getImageInfo({
					src: url,
					success: function (image) {
						console.log(image);
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function () {
								uni.showModal({
								    title: '保存成功',
								    content: '保存成功',
								    success: function (res) {
								        if (res.confirm) {
								           
								        } else if (res.cancel) {
								            
								        }
								    }
								})
							}
						});
					}
				});
			},
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #f5f5f5;
		.Lu-fxsc-box{
			padding: 20rpx;
			.Lu-fxsc-header{
				padding: 20rpx 40rpx;
				width: 630rpx;
				height:70rpx;
				background-color: #fff;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #666666;
			}
			.Lu-fxsc-lists{
				margin-top: 20rpx;
				.Lu-fxsc-list{
					padding: 40rpx;
					background-color: #fff;
					border-radius: 20rpx;
					.Lu-fxsc-listone{
						font-size: 30rpx;
						color: #666666;
						margin-top: 20rpx;
					}
					.Lu-fxsc-listimg{
						margin-top: 30rpx;
						image{
							width: 270rpx;
							height: 400rpx;
						}
						.Lu-fxsc-listime{
							margin-left: 40rpx;
							font-size: 24rpx;
							color: #666666;
						}
					}
					.Lu-fxsc-listsave{
						display: flex;
						align-items: center;
						justify-content: space-around;
						margin-top: 30rpx;
						.Lu-fxsc-listsx{
							width: 4rpx;
							height: 40rpx;
							background-color: #7f7f7f;
						}
						.Lu-fxsc-listphone,.Lu-fxsc-listext{
							color: #333333;
							font-size: 30rpx;
							
						}
						.icon-saveimg,.icon-savetext{
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		
	}
</style>